<template>
  <el-dialog
    title="添加研究方向"
    :visible.sync="dialogFormVisible"
    :before-close="infoMessage"
    @close="clear"
    ref="dialog"
    width="30%">
    <div class="block">
      <el-tree
        :data="directions"
        :node-key="props.value"
        default-expand-all
        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            添加
          </el-button>
          <el-button
            type="text"
            size="mini"
            v-if="data.directionId!==0"
            @click="() => edit(data)">
            编辑名称
          </el-button>
          <el-button
            type="text"
            size="mini"
            v-if="data.directionId!==0"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
      </el-tree>
    </div>
    <div>
      <el-input placeholder="请输入方向名" v-model="directionName"></el-input>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddDirectionForm",
  data(){
    return{
      directions:[
        {directionId:0,parentId:null,name:'论文库',children:[]}
      ],
      directionName:'',
      props: {
        value: 'id',
        label: 'name',
        pid: 'parentId',
        children: 'children',
      },
      dialogFormVisible:false
    }
  },
  methods:{
    append(data){

      if(this.directionName===''){
        this.$message.error('方向名不能为空')
        return
      }
      const child={name:this.directionName,parentId:data.directionId}
      this.$axios.post('/direction/add',child).then(()=>{
        this.$axios.get(`/direction/getId/${this.directionName}`).then(result=>{
          child.directionId=result.data.data
          if(!data.children){
            this.$set(data,'children',[])
          }
          data.children.push(child)
          console.log(data)
          this.directionName=''
          this.$message.success('添加成功')
        }).catch(failRes=>console.log(failRes))
      }).catch(failRes=>console.log(failRes))
    },

    edit(data){
      if(this.directionName===''){
        this.$message.error('方向名不能为空')
        return
      }
      this.$axios.post('/direction/update',{
        directionId:data.directionId,
        parentId:data.parentId,
        name:this.directionName
      }).then(()=>{
          data.name=this.directionName
          this.directionName=''
          this.$message.success('修改成功')
      })

    },

    remove(node, data) {
      this.$axios.get(`/direction/delete/${data.directionId}`).then(()=>{
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.directionId === data.directionId);
        children.splice(index, 1);
        this.$message.success('删除成功')
      }).catch(failRes=>{
        this.$message.error('删除失败')
        console.log(failRes)
      })

    },

    infoMessage(){
      this.$confirm('是否要取消？（取消编辑后这些研究方向的树形结构将不可修改）',{
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否', //相当于 取消按钮
        type: 'warning'
      }).then(()=>{
        this.dialogFormVisible=false
        this.$emit('done')
      }).catch(()=>{})
    },

    clear(){
      this.dialogFormVisible=false
      this.directions=[
        {directionId:0,parentId:null,name:'论文库',children:[]}
      ]
    },

    /*
      调试节点
     */
    handleNodeClick(data) {
      console.log(data);
    },
  },

}
</script>

<style scoped>

</style>
